<template>
  <div class="app-container" >
    <el-container>
      <el-header class="filter-container">
        <!--        <el-input v-model="input_toolbar" placeholder="请输入内容" style="width: 200px; " class="filter-item"></el-input>-->
        <!--        <el-button type="primary" icon="el-icon-search" @click="onSearch" style="width: 90px;" class="filter-item">搜索-->
        <!--        </el-button>-->
        <el-button type="primary" icon="el-icon-plus" @click="onCreate(0)" class="filter-item">新建</el-button>
      </el-header>
      <el-main>
        <el-row :gutter="12" class="tenant-card">
          <el-col :span="6" v-for="(item,index) in orderList" :key="item.key">

            <el-card shadow="hover" >
              <div slot="header" class="box-card-header">
                <div style="float: left">
                  <span>{{item.order_type}}</span>

                </div>
                <div style="float: right">
                  <i class="el-icon-s-tools" @click="onCreate(1,item)"></i>

                </div>
              </div>
              <div class="tenant-card-area">
                <!--                card 数据列表-->
                <ol class="tenant-card-ol">
                  <li>套餐：<span class="tenant-card-span">{{item.order_name}}</span>
                  </li>
                  <li>权限：<span class="tenant-card-span">{{item.auths}}</span></li>
                  <li>描述：<span class="tenant-card-span">{{item.describe}}</span></li>
                  <li>
                    <div style="float:right;padding-bottom: 10px;">
<!--                      <el-switch-->
<!--                        v-model="item.isTenant_onoff"-->
<!--                        active-color="#13ce66"-->
<!--                        inactive-color="#ff4949"-->
<!--                        active-text="启用"-->
<!--                        @change="onTenantOnOff(item)"-->
<!--                      >-->
<!--                      </el-switch>-->
<!--                      <i class="el-icon-delete-solid" style="color: red ;" @click="onDelete(item,index)"></i>-->
<!--                      <i  style="color: blue ;" @click="onDelete(item,index)">删除</i>-->
                      <el-button type="text " style="color: #F56C6C"  @click="onDelete(item,index)">删除</el-button>

                    </div>
                  </li>
                </ol>
              </div>
            </el-card>

          </el-col>
        </el-row>
        <!--      创建租户面板-->
        <el-dialog
          :title="dialogTitle[dialogType]"
          :visible.sync="isCreateDia"
          :close-on-click-modal=false>

          <el-form
            ref=""
            :model="order"
            :rules="rules"
            label-width="100px"
            style=" width: 80%; margin-left:50px;">
            <el-form-item label="套餐名称：" prop="order_name">
              <el-input v-model.trim="order.order_name"></el-input>
            </el-form-item>
            <el-form-item label="套餐编码：" prop="order_type">
              <el-input v-model.trim="order.order_type"></el-input>
            </el-form-item>
            <el-form-item label="价格：" prop="price">
              <el-input v-model.number="order.price"></el-input>
            </el-form-item>

            <el-form-item label="描述：" prop="describe">
              <!--              <el-input v-model.number="defaultOrder.describe"></el-input>-->
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="order.describe">
              </el-input>
            </el-form-item>
            <el-form-item label="权限：">
              <el-tree
                ref="tree"
                :check-strictly="checkStrictly"
                :data="routesData"
                :props="defaultProps"
                show-checkbox
                node-key="path"
                class="permission-tree"
              />
            </el-form-item>

            <!--            <el-form-item label="套餐：" prop="order">-->
            <!--              <el-select v-model="tenantInfo_Form.order" placeholder="请选择套餐">-->
            <!--                <el-option v-for="(item,index) in orderType"-->
            <!--                           :label="item"-->
            <!--                           :value="index">-->
            <!--                </el-option>-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="地区：">-->
            <!--              <v-distpicker province="河北省" city="石家庄市" area="桥西区"></v-distpicker>-->
            <!--            </el-form-item>-->
            <el-form-item>
              <div style="text-align:right;">
                <el-button type="danger" @click="isCreateDia=false">取消</el-button>
                <el-button type="primary" @click="confirmOrder">确认</el-button>
              </div>
            </el-form-item>
          </el-form>

        </el-dialog>
      </el-main>

    </el-container>
  </div>
</template>

<script>
  import { getOrders, addOrder, updateOrder, deleteOrder } from '@/api/basicmgt'
  import { isInteger } from '@/utils/validate'
  import { deleteRole } from '@/api/role'

  // const defaultOrder={
  //   key:"",
  //   order_type:"",  //套餐编码
  //   order_name:"",  //套餐名称
  //   auths:[],       //权限列表
  //   describe:""     //描述
  // }

  // const dialogTitle = ["创建","编辑"]

  export default {
    name: 'order',
    data() {
      return {
        rules: {
          order_name: [{ required: true, message: '不能为空', trigger: 'blur' }],
          order_type: [{ required: true, message: '请选择套餐', trigger: 'blur' }],
          price: [{ required: true, message: '请输入数字', trigger: 'blur' }, { validator: isInteger, trigger: 'blur' }]
        },
        dialogTitle: ['创建', '编辑'],
        // defaultOrder: {
        //   key: '',
        //   order_type: '',  //套餐编码
        //   order_name: '',  //套餐名称
        //   price: '',
        //   auths: [],       //权限列表
        //   describe: ''     //描述
        // },

        order: Object.assign({}, this.$global.defaultOrder),
        routes: [],
        rolesList: [],
        dialogType: '0',
        defaultProps: {
          children: 'children',
          label: 'title'
        },
        checkStrictly: false,
        isCreateDia: false,

        orderList: []
      }

    },
    computed: {
      routesData() {
        return this.routes
      }
    },

    created() {
      this.getOrders()

    },
    methods: {
      async getOrders() {
        const res = await getOrders()
        let orderList = res.data
        this.$global.ORDER_TYPE =[]
        for (let i = 0; i < orderList.length; i++) {
          this.$global.ORDER_TYPE.push(orderList[i])
        }
        this.orderList = this.$global.ORDER_TYPE

      },

      onCreate(type,_order) {
        this.isCreateDia = true
        this.dialogType = type
        if(type==0){
          this.order=Object.assign({}, this.defaultOrder)
        }else{
          this.order = _order
        }
        // this.tenantList.push(this.tenantCardInfo)
        // this.$message('创建租户'+this.tenantList.length)

      },

      onCancelDia() {
        this.isCreateDia = false
      },

      onDelete(item,index){
        this.$confirm('确定要删除套餐吗?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async() => {
            await deleteOrder(item.key)
            this.orderList.splice(index, 1)
            this.$message({
              type: 'success',
              message: 'Delete success !'
            })
          })
          .catch(err => { console.error(err) })
      },
      async confirmOrder() {

        let diaType = this.dialogType//这里参数值有具体动作来决定

        if (diaType == 0) {//创建
          const { data } = await addOrder(this.order)
          this.order.key = data.key
          // console.log('创建==' + typeof this.orderList)
          this.orderList.push(this.order)
        } else {//编辑
          await updateOrder(this.order.key, this.order)
          for (let index = 0; index < this.orderList.length; index++) {
            if (this.orderList[index].key === this.order.key) {
              this.orderList.splice(index, 1, Object.assign({}, this.order))
              break
            }
          }
        }
        this.onCancelDia()

//提示
        const { order_type, key, order_name, price } = this.order
        this.dialogVisible = false
        this.$notify({
          title: 'Success',
          dangerouslyUseHTMLString: true,
          message: `
            <div>Key: ${key}</div>
            <div>套餐编码: ${order_type}</div>
            <div>套餐名称: ${order_name}</div>
            <div>价格: ${price}</div>
          `,
          type: 'success',
          duration: 1501
        })

      }


    }
  }
</script>

<style lang="scss" scoped>
  .app-container{
    min-height: 1080px;
    width: 100%;
    display: block;
    position: relative;
  }
  .el_row {
    display: flex;
    flex-wrap: wrap;
  }

  .el-card {
    min-width: 100%;
    min-height: 100%;
    height: 230px;
    transition: all .5s;
    padding: 2px;
    margin-bottom: 20px;
    /*&:hover{*/
    /*background-color: #F2F6FC;*/
    /*}*/
  }


  .box-card-header {
    position: relative;
    height: 30px;
    font-size: 20px;
    /*font-size: larger;*/
    font-family: 'Open Sans', Arial, sans-serif;
    /*background-color: #4AB7BD;*/
    /*img{*/
    /*  width: 50%;*/
    /*  height: 100%;*/
    /*  transition: all 0.2s linear;*/
    /*}*/
  }

  .tenant-card-area {
    /*float: left;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*position:absolute;*/
    /*display: block;*/

  }

  .tenant-card-ol {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 80%;
    list-style: none;
    /*background-color: #4AB7BD;*/

  }

  .tenant-card-ol li {
    margin-top: 5px;
  }
</style>



